<template>
  <div class="demo">
    <div class="demo-title">进度圈动态展示</div>
    <div class="demo-content">
      <Progress type="circle" :percent="defaultPercent" />
      <Button.Group>
        <Button @click="decline">
          <template #icon><MinusOutlined /></template>
        </Button>
        <Button @click="increase">
          <template #icon><PlusOutlined /></template>
        </Button>
      </Button.Group>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Progress from '@sscd/progress';
  const defaultPercent = ref<number>(0);
  const increase = () => {
    const percent = defaultPercent.value + 10;
    defaultPercent.value = percent > 100 ? 100 : percent;
  };
  const decline = () => {
    const percent = defaultPercent.value - 10;
    defaultPercent.value = percent < 0 ? 0 : percent;
  };
</script>
